<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="UTF-8">
      <title>v-for列表渲染</title>
  </head>
  <body>

  <div id="app">
    <h1>列表渲染</h1>
    <ul>
<!--      语法:v-for="变量 in 数字"   {{变量}}-->
      <li v-for="i in 3">{{i}}</li>
    </ul>
    <h1>列表渲染-带索引</h1>
    <ul>
<!--      语法:v-for="(变量,索引) in 值"   {{变量}}-{{索引}}-->
      <li v-for="(i, index2) in 3">{{i}}-{{index2}}</li>
    </ul>
    <h1>遍历数据列表</h1>
    <table width="400px" border="1px">
<!--      语法:v-for="对象 in 对象数组"-->
      <tr v-for="(obj,index3) in monsters">
        <td>{{index3}}</td>
        <td>{{obj.id}}</td>
        <td>{{obj.name}}</td>
        <td>{{obj.age}}</td>
      </tr>
    </table>
  </div>




  <script src="vue.js"></script>
  <script type="text/javascript">
    let vm = new Vue({
      el:"#app",
      data:{
        monsters:[
          {id:1,name:'牛魔王',age:800},
          {id:2,name:'黑山老妖',age:900},
          {id:3,name:'红孩儿',age:200}
        ]
      }
    })
  </script>
  </body>
</html>